<template>
  <div class="search">
    <form class="searchTop">
      <van-search
        class="searchbox"
        shape="round"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <van-icon name="contact" class="icon" />
    </form>
    <div class="history">
      <p>搜索历史<van-icon name="delete-o" @click="delHandel" /></p>
      <ul class="history-mol">
        <li
          v-for="(item, index) in history"
          :key="index"
          @click="clickHistory(index)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="liebiao">
      <h4>热搜榜</h4>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
      >
        <ul>
          <li
            v-for="(item, index) in list"
            :key="item.id"
            @click="play(item.id)"
          >
            <span>{{ index + 1 }}</span>
            <b>{{ "【" + item.name + "】" + " /" + item.artists[0].name }}</b>
            <span
              v-show="item.mark > 100 ? true : false"
              :class="item.mark > 100 ? 'historyHot' : ''"
              >HOT</span
            >
          </li>
        </ul>
        <!-- <van-cell
          v-for="(item, index) in list"
          :key="item.id"
          :title="
            index+1 + '【' + item.name + '】' + ' 歌手：' + item.artists[0].name
          "
          @click="play(item.id)"
        /> -->
      </van-list>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
// import axios from "axios";
import { SearchAPI } from "../services/Search";
export default {
  data() {
    return {
      value: "",
      history: ["大张伟", "花儿", "花儿乐团"],
      list: [],
      error: false,
      loading: false,
      finished: false,
    };
  },
  methods: {
    created() {
      this.finished = false;
    },
    async onSearch(val) {
      if (this.value) {
        if (this.history.indexOf(this.value) == -1) {
          this.history.unshift(this.value);
          this.finished = true;
        }
      }
      if (this.value) {
        //查询API
        const res = await SearchAPI(this.value);
        this.list = res.result.songs;
        // console.log(res.result.songs);
        this.loading = false;
      }
      Toast(val);
    },
    clickHistory(v) {
      this.value = this.history[v];
    },
    play(id) {
      /* this.src = `https://music.163.com/song/media/outer/url?id=${id}.mp3`;
      fetch("http://localhost:3000/lyric?id=" + id)
        .then((res) => res.json())
        .then((res) => (this.lyric = res.lrc.lyric)); */
      this.$router.push({
        name: "Play",
        query: {
          id,
        },
      });
    },
    delHandel() {
      this.history = [];
    },
    onCancel() {
      Toast("取消");
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  width: 100vw;
  display: block;
  padding-top: 2.5vw;
  padding-left: 3vw;
  padding-right: 3vw;
  box-sizing: border-box;
  .searchTop {
    width: 100%;
    margin: 2.5vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6vw;
    .searchbox {
      flex: 1;
    }
    .icon {
      font-size: 7vw;
      margin: 0 5px;
      color: #bdbdbd;
    }
  }
  .van-search__action {
    padding: 0 20px;
  }
  .history {
    width: 94%;
    margin: 0 auto;
    font-size: 16px;
    .van-icon {
      float: right;
      font-size: 18px;
      color: #cecece;
    }
    .history-mol {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      li {
        padding: 4px 10px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        width: auto;
        margin: 5px 6px;
        font-size: 12px;
        background-color: #ebebeb;
        border-radius: 20px;
      }
    }
  }
  .liebiao {
    width: 94%;
    margin: 1rem auto;
    ul {
      margin-top: 1rem;
      padding-right: 2rem;
      display: flex;
      flex-direction: column;
      li {
        width: 100%;
        font-size: 15px;
        line-height: 1.5;
        display: flex;
        span {
          width: 20px;
          display: inline-block;
        }
        b {
          flex: 1;
          font-weight: normal;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        span:nth-of-type(2) {
          margin-left: 0.5rem;
          width: 3rem;
          text-align: center;
          background-color: rgb(255, 152, 152);
          border-radius: 0.5rem;
        }
      }
      .historyHot {
        color: red;
      }
    }
  }
}
</style>
